/**
 * 行政管理-办公地点
 */
import React, { useEffect } from 'react';
import { Table, Form, Alert } from 'antd';
import { history } from 'umi'
import { PageContainer } from '@/molecules';
import { Pagination } from '@/components';
import { useRequest, defaultFormatResult } from '@/hooks';
import AuthComponent from '@/utils/auth/AuthComponent';
import { getSiteList, getSyncSite } from '../service';
import styles from '../index.less';

function Site({ location }) {
    const { query = {} } = location;
    const { data = {}, loading, run } = useRequest(getSiteList, {
        manual: true,
        ...defaultFormatResult
    });
    const dataSource = data?.rows || [
        // {
        //     addressName: '中韩紫金',
        //     companyName: '微微科技',
        //     companyCode: 'xxx',
        //     freeNum: 90,
        //     totalNum: 200,
        //     usedNum: 110
        // }
    ];
    const total = data?.total || 0;


    const routerLink = (info, params = {}) => {
        history.push({
            pathname: '/office/institutions/adminManage/station',
            query: {
                addressCodes: info.addressCode,
                companyCode: info.companyCode,
                ...params
            },
            state: { tabRoute: true, tabRefresh: true }
        });
    };

    React.useEffect(() => {
        const { pageNo = 1, ...rest } = query;
        run({
            pageNo,
            ...rest
        });
    }, [query]);

    const columns = [
        {
            title: '办公地点',
            dataIndex: 'addressName'
        },
        {
            title: '行政机构',
            dataIndex: 'companyName'
        },
        {
            title: '已规划工位',
            dataIndex: 'totalNum',
            onCell: () => ({
                onClick: e => {
                    e.stopPropagation();
                }
            }),
            render: (text, record) => <div
                className={styles.numLink}
                onClick={() => { routerLink(record) }}
            >
                {text || 0}
            </div>
        },
        {
            title: '已用工位',
            dataIndex: 'usedNum',
            onCell: () => ({
                onClick: e => {
                    e.stopPropagation();
                }
            }),
            render: (text, record) => <div
                className={styles.numLink}
                onClick={() => { routerLink(record, { cubicleStatus: '1' }) }}
            >
                {text || 0}
            </div>
        },
        {
            title: '空闲工位',
            dataIndex: 'freeNum',
            onCell: () => ({
                onClick: e => {
                    e.stopPropagation();
                }
            }),
            render: (text, record) => <div
                className={styles.numLink}
                onClick={() => { routerLink(record, { cubicleStatus: '0' }) }}
            >
                {text || 0}
            </div>
        }
    ];

    const handlePaginationChange = pagination => {
        const { current, pageSize } = pagination;
        history.replace({ query: { ...query, pageNo: current, pageSize } });
    };
    useEffect(() => {
        getSyncSite();
        return () => {
            getSyncSite();
        }
    }, []);
    return (
        <PageContainer>
            <div className={styles.hintWrap}>
                <Alert message="以下内容仅展示办公地点相关信息，如需管理办公地点，请前往机构管理-编辑公司界面下操作。" type="info" showIcon banner/>
                <AuthComponent code="office:orgs:organization">
                    <div className={styles.link} onClick={() => {
                        history.push({
                            pathname: '/office/personnelManagement/organization/orgflow',
                            state: { tabRoute: true, tabRefresh: true }
                        })
                    }}>
                        立即前往
                        <span className={styles.arrow}>
                            <i className="icon iconfont iconinput-select-arrow-icon" style={{ fontSize: 12 }}/>
                        </span>
                    </div>
                </AuthComponent>
            </div>
            <Table
                rowKey="id"
                rowClassName={styles.tableRow}
                columns={columns}
                dataSource={dataSource}
                pagination={false}
                scroll={{ x: 'max-content' }}
                loading={loading}
                onRow={record => ({
                    onClick: () => {
                        routerLink(record);
                    }
                })}
            />
            <Pagination
                current={query.pageNo}
                pageSize={query.pageSize}
                loading={loading}
                total={total}
                onChange={handlePaginationChange}
            />
        </PageContainer>
    );
}

export default Form.create()(Site);
